<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <title>淘淘商城</title>
    <link rel="icon" href="../../style/images/logo.png">
    <!--element-ui的样式-->
    <link rel="stylesheet" href="../../style/common.css"/>
    <link rel="stylesheet" href="../../element-ui/index.css"/>
    <style>
        body {
            padding: 0 !important;
            margin: 0 !important;
            overflow-y: hidden;
        }

        .el-footer {
            /*background-color: #B3C0D1;*/
            color: #333;
            text-align: center;
        }

        .el-header {
            padding: 0 !important;
            background-color: white;
            color: #333;
            text-align: center;
            height: 100px !important;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            height: 90vh;
            background-color: rgb(245, 245, 245);
            color: #333;
            text-align: center;
            /*line-height: 160px;*/
        }

        .el-menu-item, .el-submenu__title {
            color: rgb(108, 108, 108) !important;
            font-weight: initial !important;
            font-size: 12px !important;
        }

        .el-menu-item:focus, .el-menu-item:hover {
            outline: 0;
            background-color: rgb(245, 245, 245) !important;
        }

        .el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
            outline: 0;
            color: rgb(255, 118, 0) !important;
        }

        .el-carousel__item h3 {
            color: #475669;
            font-size: 18px;
            opacity: 0.75;
            line-height: 300px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }

        .el-carousel__arrow {
            top: 80%;
        }

        .el-breadcrumb__inner a, .el-breadcrumb__inner.is-link {
            font-size: 14px !important;
            font-weight: normal;
            color: #1c1c1c !important;
            /*font-family: "Hiragino Sans GB";*/
        }

        .el-breadcrumb__separator {
            margin: 0 3px;
            font-weight: initial;
            color: #1c1c1c;
        }

        .infinite-list {
            padding: 0px;

        }

        .el-input__inner {
            border: 2px solid #FF4400FF;
            /*color: #fa0606 !important;*/
            border-radius: 0;
        }

        .el-input.is-active .el-input__inner, .el-input__inner:focus {
            border: 2px solid #FF4400FF;
        }

        .el-input.is-active .el-input__inner, .el-input__inner:hover {
            border: 2px solid #FF4400FF;
        }
        .el-input-group__append, .el-input-group__prepend {
            background-color: #FF4400FF;
            color: white;
            font-weight: bold!important;
            vertical-align: middle;
            display: table-cell;
            position: relative;
            border: 1px solid #FF4400FF;
            border-radius: 0;

            padding: 0 20px;
            width: 1px;
            white-space: nowrap;
        }
        .goodsWrapper{
            border: 1px solid transparent;
        }
        .goodsWrapper:hover{
            border: 1px solid rgba(255, 68, 0, 0.75);
        }
        .a{
        border-radius: 24px;
            margin: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="">
            <div>
                <div style="background-color: rgb(245,245,245) ;
            width: 100%;display: flex;justify-content: space-around">
                    <div style="height: 40px;">
                        <el-menu background-color="rgb(245,245,245)"
                                 style="float: right;" class="el-menu-demo" mode="horizontal"
                                 @select="handleSelect">


                            <el-menu-item v-show="showUser" style="color: rgb(255,68,0) !important;" index="1"><a
                                    href="login.html">亲，请登录</a></el-menu-item>

                            <el-submenu v-show="!showUser"  index="1">
                                <template style="" slot="title">
                                    <a style="color: rgb(255,68,0) !important;" href="user.html">欢迎您，{{user.username}}</a></template>
                                <el-menu-item style="height: 80px" index="2-1">
                                    <div style="">
                                        <a href="user.html">
                                            <el-image
                                                    style="width: 70px; height: 70px; border: none;border-radius: 50%;cursor: pointer;"
                                                    fit="contain"
                                                    :src="getImage(user.avatar)"
                                                    >
                                                <div slot="error" class="image-slot">
                                                    <img src="../../style/images/淘公仔2.png" style="width: auto; height: 70px; border:none;">
                                                </div>
                                            </el-image>
                                        </a>
                                        <a href="user.html"> &nbsp;&nbsp;账号管理</a> &nbsp;&nbsp;|&nbsp;&nbsp;
                                        <a @click="logout()">退出</a>
                                    </div>
                                </el-menu-item>
                            </el-submenu>

                            <el-menu-item index="2"><a href="register.html">免费注册</a></el-menu-item>
                        </el-menu>
                    </div>
                    <div style="height: 40px;">
                        <el-menu background-color="rgb(245,245,245)"
                                 style="float: right;" class="el-menu-demo" mode="horizontal"
                                 @select="handleSelect">

                            <<el-menu-item index="1"><a href="index.html" target="_blank">返回首页</a></el-menu-item>
                            <el-menu-item index="2"><a href="user.html" target="_blank">我的淘淘</a></el-menu-item>
                            <el-menu-item index="3"><a href="#" target="_blank">我的足迹</a></el-menu-item>
                            <el-menu-item index="4" class="el-icon-shopping-cart-2"
                                          style="color: rgb(255,68,0) !important;font-size: 16px !important;">
                                <a href="shoppingCart.html" target="_blank"
                                   style="color: rgb(108,108,108) !important;font-size: 12px !important;">&nbsp;&nbsp;购物车</a>
                            </el-menu-item>
                            <el-menu-item class="el-icon-star-on" style="font-size: 16px !important;" index="5">
                                <a style="font-size: 12px !important;" href="#" target="_blank">&nbsp;收藏的宝贝
                                </a></el-menu-item>
                        </el-menu>
                    </div>
                </div>
                <div style="display: flex;justify-content: center;width:100%;">
                    <div style=" display: flex;align-items: center;justify-content: space-between;
                    width: 1150px;height: 60px ">
                        <div style="display: flex;align-items: center;">
                            <a href="../../pages/front/index.html"><img style="width: 40px;height: 40px;"
                                                                        src="../../style/images/logo.png"></a>
                            <a href="../../pages/front/index.html"><img style="width: 40px;height: 40px;"
                                                                        src="../../style/images/tao.png"></a>
                            <a href="../../pages/front/index.html"><img
                                    style="width: 40px;height: 40px;margin-left: -5px"
                                    src="../../style/images/tao.png"></a>
                        </div>
                        <div style="">
                            <el-autocomplete
                                    :select-when-unmatched="true"
                                    class="inline-input"
                                    style="width: 800px !important;"
                                    v-model="state"
                                    :fetch-suggestions="querySearchAsync"
                                    placeholder="夏日男装"
                                    @select="handleSelect"
                            >
                                <el-button @click="search()" style="font-weight: bold;font-size: 16px" slot="append">搜索</el-button>
                            </el-autocomplete>
                        </div>
                    </div>
                </div>
            </div>

        </el-header>
        <el-main class="main" style="display: flex;justify-content: center;overflow-y: inherit">
            <div>
                <el-backtop target=".main" style="color: rgb(255,68,0)"></el-backtop>
                <div style="width: 1150px;">

                    <div>
                        <ul v-loading="loading" class="infinite-list" infinite-scroll-distance="200"
                            v-infinite-scroll="load" infinite-scroll-delay="500"
                            style="overflow: inherit;display: flex;flex-wrap: wrap">
                            <li
                                    style="width: 230px;border: none;list-style: none;background-color: #f5f5f5;"
                                    v-for="goods in goodsList" class="infinite-list-item">
                                <div @click="toGoodsDetail(goods.id)" style="cursor: pointer;margin-bottom: 20px;padding: 5px 10px 5px 0">
                                    <div class="goodsWrapper"  style="background-color: white;
                                    height: 310px;padding: 20px;
                                        ">
                                        <!--<img :src="goods.ia" width="100%" height="180px" alt="">-->
                                        <el-image style="width: 100%; height: 180px; border: none;cursor: pointer;"
                                                  :src="getImage(goods.image)"
                                                  fit="contain"
                                                  >
                                            <div slot="error" class="image-slot">
                                                <img src="../../style/404.jpg"
                                                     style="width: auto; height: 130px; border:none;">
                                            </div>
                                        </el-image>
                                        <div style="float: left;line-height: 30px;width: 100%;">
                                            <span style="text-align: left;display: -webkit-box;word-break: break-all;-webkit-box-orient: vertical;
                                            -webkit-line-clamp:2;overflow: hidden;text-overflow:ellipsis;">{{ goods.name }}</span>
                                            <div style="color: rgb(255,118,0);font-weight: bold;font-size: 18px;display: flex;justify-content: space-between">
                                                <div>
                                                    <b style="font-size: 13px;font-weight: bolder">￥</b>&nbsp;
                                                    {{(goods.price/100)%1===0 ? goods.price/100 +'.00' :  goods.price/100}}
                                                    <span style="color: #c0c4cc;text-decoration: line-through;font-size: 13px;font-weight: initial">
                                                        {{(goods.price/100)%1===0 ? goods.price/100+100 +'.00' :  goods.price/100+100}}</span>
                                                </div>
                                                <!-- <b style="font-weight: normal;color: black;font-size: 10px">{{ goods.sold }}+人付款</b>-->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </el-main>
        <!--        <el-footer>Footer</el-footer>-->
    </el-container>
</div>
<script src="../../js/vue.js"></script>
<script src="../../element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../js/axios.min.js"></script>
<script src="../../js/common.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                enableLoad: true,
                loading: false,
                page: 1,
                pageSize: 15,
                total: 0,
                user: {},
                showUser: true,
                goodsList: [],
                restaurants: [],
                state: '',
                timeout: null
            }
        },
        computed: {},
        watch: {
            state(){
                    this.getLike()
            }
        },
        created() {
            this.loadGoodsList()
            const user = window.localStorage.getItem('user')
            // console.log("user信息：" + user)
            if (user) {
                this.showUser = false
                this.user = JSON.parse(user)
            }
        },
        methods: {
            async getLike(){
                const  {data : res}  =  await axios.get(`/goods/like?value=${this.state}`)
                this.restaurants = res.data
            },
            toGoodsDetail(id){
                window.requestAnimationFrame(()=>{
                    window.location.href =  '/pages/front/goodsDetail.html?id='+id
                })
            },
            async logout(){
                const  {data : res}  =  await axios.post('/user/logout')
                if(res.code == 1 ){
                    localStorage.removeItem("user")
                    window.location.href = '/pages/front/index.html'
                }
            },
            shuffle(arr) {
                var l = arr.length
                var index, temp
                while (l > 0) {
                    index = Math.floor(Math.random() * l)
                    temp = arr[l - 1]
                    arr[l - 1] = arr[index]
                    arr[index] = temp
                    l--
                }
                return arr
            },
            async loadGoodsList() {
                this.loading = true
                let getIdByUrl = parseUrl(decodeURIComponent(window.location.href));
                // console.log('id:'+getIdByUrl.id)
                // console.log('name:'+getIdByUrl.name)
                const {data: res} = await axios.get(`/goods/listById/${getIdByUrl.id}&${getIdByUrl.name}`)
                this.state = getIdByUrl.name
                // console.log(res.data)
                this.goodsList = [...this.goodsList,...res.data]
                this.goodsList = this.shuffle(this.goodsList);
                this.openLoading()

            },

            async search() {
                this.enableLoad = false
                this.loading = true
                this.goodsList = ''
                let getIdByUrl = parseUrl(decodeURIComponent(window.location.href));
                // console.log('id:'+getIdByUrl.id)
                // console.log('name:'+getIdByUrl.name)
                const {data: res} = await axios.get(`/goods/listById/&${this.state}`)
                this.state = ''
                // this.state = getIdByUrl.name
                // console.log(res.data)
                this.goodsList = [...this.goodsList,...res.data]
                this.goodsList = this.shuffle(this.goodsList);
                this.openLoading()

            },

            getImage(image) {
                return `/common/download?name=${image}`
            },
            load() {
                if(this.enableLoad){
                    this.loadGoodsList()
                }
                console.log("触底加载")
                // this.count += 1
            },
            loadAll() {
                return [
                    { value: "女鞋"},
                    { value: "裤子男"},
                    { value: "手提包"},
                    { value: "短袖"},
                    { value: "手机"},
                    { value: "衣服" },
                ];
            },
            openLoading(){
                setTimeout(()=>{
                    this.loading = false
                },1000)
            },
            querySearchAsync(queryString, cb) {
                var restaurants = this.restaurants;
                // var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(restaurants);
            },
            createStateFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
             async handleSelect(item) {
                this.enableLoad = false
                this.loading = true
                this.goodsList = ''
                 console.log(item)
                let getIdByUrl = parseUrl(decodeURIComponent(window.location.href));
                const {data: res} = await axios.get(`/goods/listById/&${item.value}`)
                this.state = ''
                this.goodsList = [...this.goodsList,...res.data]
                this.goodsList = this.shuffle(this.goodsList);
                this.openLoading()
            }
        },
        mounted() {
            this.restaurants = this.loadAll();
        }
    })
</script>
</body>
</html>